<template>
  <div class="table-list">
    <table-list :tableList="stockList" :offsetTop="offsetTop">
      <!-- 名称 -->
      <stock-list-item prop="stock_code" label="名称" label-width="1.7rem" label-align="left">
        <tempalte v-slot="scope">
          <div class="stock_detail_template">
            <div v-if="scope.name" class="stock-td" v-hxm-fontResize="{ minSize: 6 }">
              {{ scope.name }}
            </div>
            <div v-else>--</div>
            <div>{{ scope.stock_code }}</div>
          </div>
        </tempalte>
      </stock-list-item>
      <stock-list-item
        prop="nowPrice"
        label="现价"
        sortable="true"
        label-width="1.4rem"
        label-align="right"
      >
        <tempalte v-slot="scope">
          <div class="table_in_template">
            <div v-if="scope.upDownPercent > 0" class="up_data">
              {{ scope.nowPrice }}
            </div>
            <div v-else-if="scope.nowPrice && Number(scope.nowPrice) === 0" class="zero_data">
              {{ scope.nowPrice }}
            </div>
            <div v-else-if="['', undefined, -9999].includes(scope.nowPrice)">--</div>
            <div v-else class="down_data">
              {{ scope.nowPrice }}
            </div>
          </div>
        </tempalte>
      </stock-list-item>
      <stock-list-item
        prop="upDownPercent"
        label="涨幅"
        label-width="1.4rem"
        sortable="false"
        label-align="right"
      >
        <tempalte v-slot="scope">
          <div class="table_in_template">
            <div v-if="scope.upDownPercent > 0" class="up_data">{{ scope.upDownPercent }}%</div>
            <div
              v-else-if="scope.upDownPercent && Number(scope.upDownPercent) === 0"
              class="zero_data"
            >
              {{ scope.upDownPercent }}%
            </div>
            <div v-else-if="!scope.upDownPercent || scope.upDownPercent === -9999">--</div>
            <div v-else class="down_data">{{ scope.upDownPercent }}%</div>
          </div>
        </tempalte>
      </stock-list-item>
      <!-- 最高涨幅 -->
      <stock-list-item
        prop="maximum_rise"
        label="最高涨幅"
        sortable="true"
        label-width="1.6rem"
        label-align="right"
      >
        <tempalte v-slot="scope">
          <div class="table_in_template">
            <div :class="getColorClass(scope.maximum_rise)">
              {{ formatPercent(scope.maximum_rise, 2, false) }}
            </div>
          </div>
        </tempalte>
      </stock-list-item>
      <!-- 区间涨幅 -->
      <stock-list-item
        prop="range_rise"
        label="区间涨幅"
        sortable="true"
        label-width="1.6rem"
        label-align="right"
      >
        <tempalte v-slot="scope">
          <div class="table_in_template">
            <div :class="getColorClass(scope.range_rise)">
              {{ formatPercent(scope.range_rise, 2, false) }}
            </div>
          </div>
        </tempalte>
      </stock-list-item>
      <!-- 调入时间 -->
      <stock-list-item
        prop="open_date"
        label="调入时间"
        sortable="true"
        label-width="2.2rem"
        label-align="right"
      >
        <tempalte v-slot="scope">
          <div class="table_in_template">
            {{ timestampToTime(scope.open_date, 3) }}
          </div>
        </tempalte>
      </stock-list-item>
      <!-- 持仓成本 -->
      <stock-list-item
        prop="cost_price"
        label="持仓成本"
        sortable="true"
        label-width="1.4rem"
        label-align="right"
      >
        <tempalte v-slot="scope">
          <div class="table_in_template">
            {{ formatPercent(scope.cost_price, 3, false, false) }}
          </div>
        </tempalte>
      </stock-list-item>
      <!-- 当前仓位 -->
      <stock-list-item
        prop="suggest_position"
        label="当前仓位"
        label-width="1.4rem"
        label-align="right"
      >
        <tempalte v-slot="scope">
          <div class="table_in_template">
            {{ formatPercent(scope.suggest_position, 2, false) }}
          </div>
        </tempalte>
      </stock-list-item>
      <!-- 调出时间 -->
      <stock-list-item
        prop="liquidation_date"
        label="调出时间"
        sortable="true"
        label-width="2.2rem"
        label-align="right"
      >
        <tempalte v-slot="scope">
          <div class="table_in_template">
            {{ timestampToTime(scope.liquidation_date, 3) }}
          </div>
        </tempalte>
      </stock-list-item>
      <!-- 清仓价格 -->
      <stock-list-item
        prop="liquidation_price"
        label="清仓价格"
        sortable="true"
        label-width="1.4rem"
        label-align="right"
      >
        <tempalte v-slot="scope">
          <div class="table_in_template">
            {{ formatPercent(scope.liquidation_price, 3, false, false) }}
          </div>
        </tempalte>
      </stock-list-item>
      <!-- 状态 -->
      <stock-list-item
        prop="real_status"
        label="状态"
        label-width="1.4rem"
        label-align="right"
      >
        <tempalte v-slot="scope">
          <div class="table_in_template">
            {{ getEtfStatus(scope.real_status) }}
          </div>
        </tempalte>
      </stock-list-item>
    </table-list>
  </div>
</template>

<script>
import TableList from '@/components/TableList.vue';
import { ETF_STATUS } from '@/config/portfolio';
import { timestampToTime, formatText, formatPercent, getColorClass } from '@/utils';

export default {
  components: {
    TableList,
  },
  props: {
    stockList: {
      default: () => [],
      type: Array,
    },
    offsetTop: {
      default: '0px',
      type: String,
    },
  },
  methods: {
    timestampToTime,
    formatText,
    formatPercent,
    getColorClass,
    getEtfStatus(status) {
      return ETF_STATUS[status] || '--';
    }
  },
};
</script>

<style lang="less" scoped>
.table-list {
  min-height: 254px;
}

.stock_detail_template, .table_in_template {
  color: var(--text-1);
}

.stock-td {
  width: 1.5rem;
  overflow: hidden;
  white-space: nowrap;
}
</style>
